<template>
    <div class="dashboard">
        <div class="loadingBg" v-if="showLoading">
            <div class="loading">
                <img src="../assets/image/loading.gif" />
            </div>
        </div>
        <div v-else>
            <div class="textScoll">
                <ul id="demo1">
                    <li class="scollText" v-for="(item, index) in addUserLsist" :key="index">
                        <i class="icon top"></i>
                        来自 <span>{{item.schoolName}}</span> 的用户 <span>{{item.mobile}}</span> 加入了升学在线
                    </li>
                </ul>
            </div> 
            <div class="contBg">
                <div class="logo">
                    <img src="https://static.shengxue985.com/oss/dashboard/logo.png" />
                </div>
                <div class="number">
                    <ul>
                        <li>
                            <i class="icon leftIcon"></i>
                            <div><span>{{userAgency.userTotalCount}}</span> 用户选择升学在线 </div>
                        </li>
                        <li class="last">
                            <i class="icon leftIcon two"></i>
                            <div><span>{{userAgency.agencyTotalCount}}</span> 机构与我们合作</div>
                        </li>
                    </ul>
                </div> 
                <div class="map-chart">
                    <span>用户分布</span>
                    <mapChart :mapData="chinaList" :blingData="bling"></mapChart>
                    <div class="description"><i></i>点击区域，查看用户情况</div>
                </div>
                <div class="topCont">
                    <div class="title">
                        排行榜
                        <i class="icon pic"></i>
                        <span>top10</span>
                    </div>
                    <div class="tabTitle">
                        <ul>
                            <li :class="{'active':showCont}" @click="showCont ? temp() :changeUser()">区域用户</li>
                            <li class="two" :class="{'active':!showCont}" @click="showCont ? changeUser() : temp()"><span>学校用户</span></li>
                        </ul>
                    </div>
                    <div class="tabCont">
                        <div v-show="showCont">
                            <dl v-for="(item, index) in rankingData.areaRankings" :key="index" v-show="index<10">
                                <dt>
                                    <i class="icon" :class="{'topIcon':index<3,'two':index==1,'three':index==2}" v-show="index<3"></i> 
                                    <i v-show="index>=3" v-html="index<9?('0'+(index+1)):index+1"></i>
                                    <span>{{item.name}}</span>
                                </dt>
                                <dd>{{item.total}}</dd>
                            </dl>
                        </div>
                        <div v-show="!showCont">
                            <dl v-for="(item, index) in rankingData.schoolRankings" :key="index" v-show="index<10">
                                <dt>
                                    <i class="icon" :class="{'topIcon':index<3,'two':index==1,'three':index==2}" v-show="index<3"></i> 
                                    <i v-show="index>=3" v-html="index<9?('0'+(index+1)):index+1"></i>
                                    <span>{{item.name | textZone}}</span>
                                </dt>
                                <dd>{{item.total}}</dd>
                            </dl>
                        </div>
                    </div>
                </div> 
            </div>
        </div>
    </div>
</template>

<script>
import mapChart from './../components/common/map.vue';
import api from "../api";
import {toast} from "../toast";
export default {
    components: {
        mapChart
    },
    data(){
        return{
            showCont:true,
            addUserLsist:[],
            rankingData: null,
            token:'eyJhbGciOiJSUzI1NiJ9.eyJzdWIiOiJtYW5hZ2VyMyIsInVzZXJJZCI6IjMiLCJmcm9tIjoibWFuYWdlciIsIm5iZiI6MTU0MzIwMjg1Mn0.XtuuC1XPvG8rvlQgPYAa2IKf6Y4BB08iFBTuP1fOspPAxv6HRQpP7GPhCEPGEr9uNtp3CNuAtPF8Ax9xwgu4X6bSQnGBpGYD6pC4103RMdT3rAFGpH3zRjYvLbpkY1xC2-TPXJS5OvOIxHMGCIAemO4uFjVOi98m8i6eDGWScRU',
            chinaList:[],
            bling:[],
            showLoading:true,
            userAgency:[]
        }
    },
    created(){
        let self=this;
        self.getUser();
        self.getChinaData();
        self.getRankingData();
        self.getuserAgencyCount();
        setInterval(function(){
            self.getUser(1);
            self.getChinaData();
            self.getRankingData();
            self.getuserAgencyCount();
        },300000);
    },
    filters:{
        number: function(num){
           var num = (num || 0).toString();
            var result = '';
            while (num.length > 3) {
                result = ',' + num.slice(-3) + result;
                num = num.slice(0, num.length - 3);
            }
            if (num) { result = num + result; }
            return result;
        },
        textZone: function(text){
            if(text.length>12){
                return text.slice(0,12) +'...'
            }else{
                return text
            }
        }
    },
    methods:{
        temp(){
        },
        changeUser(){
            this.showCont=!this.showCont;
        },
        // 实时滚动
        scroll(){
            this.$nextTick(function(){
                var demo = document.getElementsByClassName('scollText'); 
                var width = 0;
                var l = 0;
                for (var i = 0; i < demo.length; i++) {
                    width += demo[i].offsetWidth;
                }
                setTimeout(function(){ 
                    document.querySelector('#demo1').style.width=width+demo[0].offsetWidth+'px';
                    var newdiv =document.querySelector('#demo1').children[0].cloneNode(true);
                    document.querySelector('#demo1').appendChild(newdiv);
                },50)
                setInterval(function() {
                    if (l < -width) {
                        l = 0;
                    } else {
                        setTimeout(function(){
                            document.querySelector('#demo1').style.left=(l -= 1)+'px'
                        },50)
                    }
                }, 30);
            })
        },
        // 获取实时注册用户
        getUser(num){
            let self=this;
            self.addUserLsist=[];
            api.addUser(self.token)
				.then(res => {
                    if(res.data.code=='0'){
                        self.showLoading=false;
                        self.addUserLsist=res.data.data;
                        if(num!=1){
                            setTimeout(function(){
                               self.scroll(); 
                            },50)
                        }
                    }else{
                        self.showLoading=false;
                        toast(res.data.message);
                    }
            }).catch(err => {
                self.showLoading=false;
                toast(err);
            });
        },
        // 查询全国区域统计数据
        getChinaData(){
            let self=this;
            self.bling=[];
            api.chinaData(self.token)
                .then(res=>{
                if(res.data.code=='0'){
                    let list=res.data.data;
                    let new_cookieList = []
                    let cookieList=JSON.parse(localStorage.getItem("cityList"));
                    if(cookieList){//是否存储
                        for(let i in cookieList){
                            for(let j in list){
                                if(cookieList[i].name==list[j].name){
                                    if(list[j].total-cookieList[i].total>0){
                                        self.bling.push({
                                            name: list[j].name,
                                            value: list[j].total,
                                            total: list[j].total,
                                            ranking: list[j].ranking,
                                        });
                                    }
                                }
                            }
                        }
                    }
                    localStorage.setItem('cityList',JSON.stringify(list));
                    self.chinaList=res.data.data;
                    self.chinaList.push({
                        name: "新疆",
                        ranking: 30,
                        reportId: 0,
                        total: 0,
                        },{
                        name: "澳门",
                        ranking: 31,
                        reportId: 0,
                        total: 0,
                        },{
                        name: "香港",
                        ranking: 32,
                        reportId: 0,
                        total: 0,
                        },{
                        name: "台湾",
                        ranking: 33,
                        reportId: 0,
                        total: 0,
                        },{
                        name: "西藏",
                        ranking: 34,
                        reportId: 0,
                        total: 0,
                    })
                }else{
                    self.chinaList=[];
                    toast(res.data.message);
                }
            }).catch(err => {
                self.chinaList=[];
                toast(err);
            });
        },
        // 查询区域和学校排行榜
        getRankingData(){
            let self=this;
            self.rankingData=[];
            let params={ "queryType": 0}
            api.rankingData(params, self.token)
				.then(res => {
                    if(res.data.code=='0'){
                        self.rankingData=res.data.data;
                    }else{
                        toast(res.data.message);
                    }
                })
                .catch(err => {
					toast(err);
            });
        },
         // 查询用户总数和机构总数
        getuserAgencyCount(){
            this.userAgency=[];
            api.userAgencyCount(this.token)
                .then(res => {
                    if(res.data.code=='0'){
                        this.userAgency=res.data.data;
                    }else{
                        toast(res.data.message);
                    }
                })
                .catch(err => {
					toast(err);
            });
        },
    }
}
</script>

<style lang="scss" scoped>
@import "../styles/mixin.scss";
    .dashboard{
        background: #fff5ce;
        overflow: hidden;
        .textScoll{
            width: px2rem(660);
	        margin: 0 auto;
            height: px2rem(64);
            line-height: px2rem(64);
            overflow: hidden;
            font-size: px2rem(28);
            color: #666;
            ul{
                position: relative;
                li{
                    float: left;
                    padding-right:px2rem(40);
                    i.top{
                        display: inline-block;
                        width: px2rem(34);
                        height: px2rem(40);
                        background-position: -128px 1px; 
                        vertical-align: middle;
                    }
                    span{
                        display: inline-block;
                    }
                }
            }
        }
        .contBg{
            background: url(https://static.shengxue985.com/oss/dashboard/bg.png) no-repeat top #e6ffef;
            padding: 0 px2rem(30);
            background-size: 100%;
            padding-top: px2rem(40);
            padding-bottom: px2rem(26);
        }
        .logo{
            width:px2rem(170);
            height: px2rem(70);
            img {
                width: 100%;
                }
        }
         .icon{
            background: url(https://static.shengxue985.com/oss/dashboard/icon.png) left no-repeat;
            background-size: 227px 73px;
        }
        .number{
            font-size: px2rem(28);
            color: #fff;
            padding-top: px2rem(54);
            overflow: hidden;
            ul{
                li{
                    display: flex;
                    align-items: center;
                    div{
                         padding-left: px2rem(28)
                    }
                    span{
                        display: block;
                        font-size: px2rem(50);
                        font-weight: bold;
                    }
                }
                .leftIcon{
                    width: px2rem(114);
                    height:px2rem(84);
                    background-position: 0 0;  
                    display: inline-block;
                }
                .two{
                    background-position: -60px 0px;
                }
                .last{
                    padding-top: px2rem(20)
                }
            }
        }
        @keyframes scoll
        {
            0%{
                bottom: px2rem(30);
            }
            100%{
                bottom:px2rem(60);
            }	
        }
        .topCont{
            background: #fff;
            margin-top:px2rem(30);
            padding: 0 px2rem(30);
            border-radius: 10px;
            box-shadow: 2px 2px 8px 0 rgba(0,167,21,0.22);
            .title{
                font-size: px2rem(32);
                color: #333333;
                display: block;
                padding-top:px2rem(40);
                i.pic{
                    display: inline-block;
                    width: px2rem(44);
                    height: px2rem(38);
                    background-position: -154px 0px;
                    vertical-align: middle;
                    margin-left: px2rem(20);
                }
                span{
                    color: #F1C834;
                    font-size: px2rem(28);
                }
            }
        }
        .tabTitle{
            font-size: px2rem(32);
            ul{
                display: flex;
                justify-content: space-between;
                li{
                    width: px2rem(320);
                    height: px2rem(120);
                    line-height: px2rem(108);
                    color: #58CB11;
                    text-align: center;
                    background: url(../assets/image/dashboard/but1.png) center no-repeat;
                    background-size: 100%;
                    cursor: pointer;
                }
                .two{
                   background: url(../assets/image/dashboard/but2.png) center no-repeat;
                   background-size: 100%;
                }
                .active{
                    background: url(../assets/image/dashboard/butActive1.png) center no-repeat;
                    background-size: 100%;
                    color: #fff;
                }
                .two.active{
                   background: url(../assets/image/dashboard/butActive2.png) center no-repeat;
                   background-size: 100%;
                }
            }
        }
        .tabCont{
            margin-top: px2rem(-18);
            padding-bottom: px2rem(25);
            dl{
                display: flex;
                justify-content: space-between;
                padding: px2rem(21) 0;
                color: #333333;
                font-size: px2rem(32);
                .topIcon{
                    background-position: -180px 0px;
                    vertical-align: middle;
                }
                .topIcon.two{
                    background-position: -205px 0px;
                }
                .topIcon.three{
                    background-position: 0px -48px;
                }
                dt{
                    i{
                        display: inline-block;
                        width: px2rem(44);
                        height: px2rem(40);
                        font-style: normal;
                        color: #999999;
                        font-size: px2rem(28);
                    }
                    span{
                        padding-left: 5px;
                    }
                }
                dd{
                    color: #999999;
                }
            }
            
        }
        .map-chart{
            background: #fff;
            height: px2rem(600);
            margin-top: px2rem(50);
            border-radius: px2rem(22);
            box-shadow: 0px 2px 12px #a5f5ba;
            position: relative;
            span{
                font-size: px2rem(32);
                font-family: "PingFangSC-Medium";
                color: #333333;
                display: block;
                position: absolute;
                left:px2rem(36);
                top:px2rem(40);
                z-index: 999;
            }
            .description{
                i{
                    width: px2rem(14);
                    height: px2rem(14);
                    border-radius: 100%;
                    background: #FDE27F;
                    display: inline-block;
                    vertical-align: middle;
                    margin-right: px2rem(14);
                }
                color: #C1C1C1;
                font-size: px2rem(24);
                position: absolute;
                bottom: px2rem(24);
                left: px2rem(30);
            }
        }
         .loadingBg{
            background: #fff;
            position: fixed;
            height: 100%;
            width: 100%;
            z-index: 999
        }
        .loading{
            width: px2rem(200);
            height: px2rem(200);
            display: block;
            position: fixed;
            left: 50%;
            top: 50%;
            z-index: 9999;
            margin-left: px2rem(-100);
            margin-top: px2rem(-100);
            background-size: 10% 10%;
            img{
                width: 100%
            }
        }
    }
</style>
